<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			* {
				padding: 0;
				margin: 0;
			}

			.blue {
				width: 200px;
				height: 200px;
				background-color: blue;
				margin: 300px auto 0;

				/* 关键帧动画名称 */
				/*animation-name: changeWidth;*/
				
				/* 动画持续时间 */
				/*animation-duration: 2s;*/

				/* 动画时间函数 */
				/*animation-timing-function: linear;*/

				/* 动画延迟时间 */
				/*animation-delay: 2s;*/

				/* 
					动画播放次数 
					infinite: 无限次;
				*/
				/*animation-iteration-count: 3;*/

				/* 
					动画方向 
					normal: 正方向;
					reverse: 反方向;
					alternate: 奇数次正方向, 偶数次反方向;
					alternate-reverse: 奇数次反方向, 偶数次正方向;
				*/
				/*animation-direction: alternate;*/
				
				/*
					动画填充模式
					forwards: 保留最后一帧动画效果;
					backwards: 在有延迟时间的情况下, 保留第一帧动画效果;
					both: 同时具有forwards和backwards的效果;
				*/
				/*animation-fill-mode: both;*/

				/* 简写 */
				animation: changeWidth 2s linear 0s 3 alternate both,
							roll 2s linear 0s infinite;


			}

			@keyframes changeWidth {
				/* from 相当于 0% */
				from {
					width: 100px;
				}

				/*25% {
					width: 50px;
				}

				50% {
					width: 400px;
				}

				75% {
					width: 750px;
				}*/
				
				/* to 相当于100% */
				to {
					width: 600px;
				}
			}
			
			/* 滚动 */
			@keyframes roll {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}




		</style>
	</head>
	<body>

		<div class="blue"></div>
		
	</body>
</html>